<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import EchoHello from './components/EchoHello.vue'
import { useLayoutStore } from './stores/layout';

const layout = useLayoutStore()

</script>

<template>
  <header v-if="layout.headerEnable">
    <div class="flex flex-row justify-start gap-2 py-4">
      <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="28" height="28" />
      <EchoHello msg="豆与瓜" />
      <nav class="flex flex-row gap-2 py-2">
        <RouterLink to="/" class="text-xl" active-class="text-blue-500">首页</RouterLink>
        <RouterLink to="/calcu" class="text-xl" active-class="text-blue-500">计算</RouterLink>
        <RouterLink to="/about" class="text-xl" active-class="text-blue-500">关于</RouterLink>
        <RouterLink to="/print" class="text-xl">打印</RouterLink>
        <RouterLink to="/tw" class="text-xl" active-class="text-blue-500">太吾</RouterLink>
        <RouterLink to="/grimdawn" class="text-xl" active-class="text-blue-500">恐怖黎明</RouterLink>
      </nav>
    </div>
  </header>
  <main>
    <RouterView />
  </main>
</template>
